<template>
  <div>
    <label>区域:</label>
    <div style="display:inline-block" v-for="(area_item,index) in area_list" class="swich_city" :class="area_item.qy?'on':''">
      <a @click="qh(index)">{{area_item.area1}}</a>
    </div>
    <div v-for="(area_item,index1) in area_list">
      <div v-if="area_item.qy" style="display: block;position: relative" class="swich_div">
        <a href="javascript:" v-for="(item,index2,key) in area_item.areas" @click="Checked($event,index1,index2,item.checked)" :class="{on:item.checked}">{{item.name}}</a>
        <a href="javascript:" class="multi_select" :class="multi_select?'on':''" @click="MultiSelect">多选</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data ()
  {
    return {
      qy: [],
      area_list: [
        {
          area1:"城市1" ,
          areas:[
            {name:"区域1",checked:false},
            {name:"区域1",checked:false},
            {name:"区域1",checked:false},
            {name:"区域1",checked:false},
            {name:"区域1",checked:false},
            {name:"区域1",checked:false}
          ],
          qy:false
        },
        {
          area1:"城市2" ,
          areas:[
            {name:"区域2",checked:false},
            {name:"区域2",checked:false},
            {name:"区域2",checked:false},
            {name:"区域2",checked:false},
            {name:"区域2",checked:false},
            {name:"区域2",checked:false}
          ],
          qy:false
        },
        {
          area1:"城市3" ,
          areas:[
            {name:"区域3",checked:false},
            {name:"区域3",checked:false},
            {name:"区域3",checked:false},
            {name:"区域3",checked:false},
            {name:"区域3",checked:false},
            {name:"区域3",checked:false}
          ],
          qy:false
        }
      ],
      multi_select:false,
      ClearCheaked:function(){}
    }
  }
  ,mounted(){
    this.ClearCheaked = function(){
      for (var key1 of this.area_list.keys()) {
        for (var key2 of this.area_list[key1].areas.keys()) {
          this.area_list[key1].areas[key2].checked = false;
        }
      }
    }
  },
  methods: {
    qh(index)
    {
      for(var i=0;i<this.area_list.length;i++){
        this.area_list[i].qy = false;
      }
      this.area_list[index].qy = true;
    },
    MultiSelect(){
      this.multi_select = !this.multi_select;
      if(!this.multi_select){
        this.ClearCheaked();
      }
    },
    Checked(event,index1,index2,bool){
      if(!this.multi_select) {
        this.ClearCheaked();
      }
      this.area_list[index1].areas[index2].checked = !bool;
      console.info(event.currentTarget);
    }
  }
  }
</script>

<style>
  .swich_city a,.swich_div a{
    color: #333;
    margin-right: 5px;
    display: inline-block;
  }
  .swich_city.on a,.swich_div.on a{
    color: #e34444;
  }
.swich_div{
  padding: 10px 30px 10px 10px;
  background: #fbfbfb;
  border: 1px solid #ddd;
  margin: 5px 0;
}
  .swich_div .on{color:#e34444;}
  .multi_select{
    position: absolute;
    right: 5px;
    top: 10px;
  }
  .multi_select.on{
    color:#e34444;
  }
</style>
